HttpClientModule Angular-এর একটি গুরুত্বপূর্ণ মডিউল যা HTTP ক্লায়েন্ট API প্রদান করে, যা সার্ভার থেকে ডেটা প্রাপ্তি এবং পাঠানোর জন্য ব্যবহৃত হয়। এটি Angular HttpClient ক্লাসের মাধ্যমে HTTP অনুরোধ তৈরি, পাঠানো এবং গ্রহণ করা সহজ করে তোলে। HttpClientModule এর মাধ্যমে আপনি GET, POST, PUT, DELETE এবং অন্যান্য HTTP মেথড ব্যবহার করে সার্ভারের সাথে যোগাযোগ করতে পারেন।

HttpClientModule কী?

HttpClientModule একটি Angular মডিউল যা HttpClient সেবা প্রদান করে। এটি অ্যাপ্লিকেশনকে HTTP রিকোয়েস্ট পাঠানোর এবং রেসপন্স পাওয়ার জন্য প্রয়োজনীয় কার্যকলাপ পরিচালনা করতে সাহায্য করে। Angular অ্যাপ্লিকেশনগুলোর মধ্যে ডেটা আদান-প্রদানের জন্য এটি অত্যন্ত প্রয়োজনীয়।

HttpClientModule ব্যবহারের সুবিধা:

1. সরাসরি HTTP রিকোয়েস্ট পরিচালনা: HttpClient ব্যবহার করে সহজেই GET, POST, PUT, DELETE ইত্যাদি HTTP রিকোয়েস্ট করা যায়।
2. অটো JSON পার্সিং: সার্ভার থেকে পাওয়া JSON ডেটা সরাসরি Observable তে পরিণত হয়, যার ফলে ডেটা পার্সিং এর দরকার পড়ে না।
3. রিস্পন্স হ্যান্ডলিং: HTTP রেসপন্সের সঙ্গে সহজেই কাজ করা যায়, যেমন স্ট্যাটাস কোড, হেডার, রেসপন্স বডি ইত্যাদি।
4. ইরর হ্যান্ডলিং: HTTP রিকোয়েস্টের ত্রুটি গুলো সহজভাবে হ্যান্ডেল করা যায়।
5. অ্যাসিঙ্ক্রোনাস রিকোয়েস্ট: HTTP রিকোয়েস্টগুলো অ্যাসিঙ্ক্রোনাসভাবে চালানো যায়, যার ফলে অ্যাপ্লিকেশন ব্লকিং হয় না এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।

HttpClientModule ইনস্টল এবং কনফিগারেশন

1. HttpClientModule আমদানি করা:

প্রথমে, আপনার অ্যাপ্লিকেশনে HttpClientModule ইনস্টল ও কনফিগার করতে হবে। এটি করতে, app.module.ts ফাইলে HttpClientModule আমদানি করুন।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';  // Import HttpClientModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule], // Add HttpClientModule to imports
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে, HttpClientModule মডিউলটি imports অ্যারে-তে যোগ করা হয়েছে, যা Angular অ্যাপ্লিকেশনে HTTP অনুরোধ ব্যবহারের জন্য প্রস্তুত।

HttpClient ব্যবহার করা

HttpClient ব্যবহার করে বিভিন্ন ধরনের HTTP রিকোয়েস্ট করা যায়। এটি RxJS Observables ব্যবহার করে রেসপন্স হ্যান্ডলিং এবং অ্যাসিঙ্ক্রোনাস কার্যক্রম পরিচালনা করে।

GET রিকোয়েস্ট উদাহরণ

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  data: any;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/posts')
      .subscribe(response => {
        this.data = response;
        console.log(this.data);
      }, error => {
        console.error('Error:', error);
      });
  }
}

এখানে:

• http.get() মেথডটি GET রিকোয়েস্ট পাঠায়। এটি একটি Observable রিটার্ন করে।
• .subscribe() মেথডটি রেসপন্সটি গ্রহণ করে এবং সফল হলে response ডেটা থেকে প্রাপ্ত তথ্য this.data এ সংরক্ষণ করা হয়।

POST রিকোয়েস্ট উদাহরণ

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private http: HttpClient) { }

  onSubmit() {
    const postData = { title: 'Angular POST Example', body: 'This is a test post.' };
    
    this.http.post('https://jsonplaceholder.typicode.com/posts', postData)
      .subscribe(response => {
        console.log('Post response:', response);
      }, error => {
        console.error('Error:', error);
      });
  }
}

এখানে:

• http.post() মেথডটি POST রিকোয়েস্ট পাঠায় এবং postData ডেটা সার্ভারে পাঠানো হয়।
• .subscribe() মেথডটি রেসপন্স বা ত্রুটি হ্যান্ডলিং করে।

HttpClient ইরর হ্যান্ডলিং

HTTP রিকোয়েস্ট পাঠানোর সময় ইরর আসতে পারে। Angular-এ HTTP রিকোয়েস্টের ত্রুটি হ্যান্ডলিং করতে RxJS operators যেমন catchError ব্যবহার করা হয়।

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/invalid-url')
      .pipe(
        catchError(error => {
          console.error('An error occurred:', error);
          return throwError(error);
        })
      )
      .subscribe(response => {
        console.log(response);
      });
  }
}

এখানে:

• catchError() ব্যবহার করে HTTP রিকোয়েস্টের ত্রুটি ধরতে এবং কাস্টম ত্রুটি মেসেজ দেখাতে সাহায্য করা হয়।

সারাংশ

HttpClientModule Angular অ্যাপ্লিকেশনে HTTP রিকোয়েস্ট পরিচালনা করার জন্য একটি গুরুত্বপূর্ণ মডিউল। এটি GET, POST, PUT, DELETE ইত্যাদি HTTP মেথড সাপোর্ট করে এবং ডেটা আদান-প্রদানে সহায়তা করে। HttpClient ব্যবহার করে অ্যাসিঙ্ক্রোনাসভাবে HTTP রিকোয়েস্ট করা যায়, এবং ত্রুটি হ্যান্ডলিং, রেসপন্স প্রসেসিং ইত্যাদি খুব সহজে করা যায়।